<template>
  <el-dialog
    title="退费列表"
    width="1100px"
    top="30px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          合计退费数：
          <span class="text-danger">{{ tableData.length }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          退费金额：
          <span class="text-danger">{{ countData.p }}</span>
          万元
        </span>

        <el-button class="float-right" icon="fa fa-sitemap" @click="handleFlow()">
          审批流程
        </el-button>
      </div>
    </div>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <edit-dialog
      :visible.sync="editVisible"
      :table-id="tableId"
      @success="handlerSuccess"
      :view-mode="viewMode"
    ></edit-dialog>

    <flow-dialog
      title="保费退费审批流程"
      :visible.sync="flowVisible"
      flow-key="BACK_GUA_APPROVAL"
    ></flow-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import editDialog from '@/bigcredit/views/settle/refund/components/MainDialog'
import FlowDialog from '@/credit/components/flow/ViewDialog'
export default {
  components: {
    editDialog,
    FlowDialog,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      loading: false,
      tableName: 'pay_fee_record_view',
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', minWidth: 120 } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: 120 } },
        {
          attrs: { label: '退费时间', prop: 'pay_time', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '退费金额(万元)', prop: 'pay_funds', align: 'center' } },
        { attrs: { label: '待处理人', prop: 'task_person_name', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            {
              content: '审批',
              icon: 'fa fa-gavel',
              event: this.handleApprove,
              ifRender: row => row.task_person === this.userId,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      tableData: [],
      tableId: '',
      editVisible: false,
      viewMode: false,
      flowVisible: false,

      countLoading: false,
      countData: {},
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handlerSuccess() {
      this.$emit('success')
      this.getData()
    },
    handleFlow() {
      this.flowVisible = true
    },
    handleApprove(row) {
      this.editVisible = true
      this.viewMode = false
      this.tableId = row.id
    },
    handleView(row) {
      this.editVisible = true
      this.viewMode = true
      this.tableId = row.id
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getCountData() {
      this.countLoading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            'customer_related_id.eq': this.queryId,
            'pay_fee_type.eq': 2,
            groupFunc: 'round(sum(pay_funds)|2)',
          },
          { create_time: 'desc' }
        )
        .then(res => {
          this.countData = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    getData() {
      if (!this.queryId) {
        this.tableData = []
        return
      }
      this.loading = true
      this.getCountData()
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            'customer_related_id.eq': this.queryId,
            'pay_fee_type.eq': 2,
          },
          { create_time: 'desc' }
        )
        .then(res => {
          this.tableData = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
